﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(value,key) in searchParams.filterParams" v-if="key!=='brandId'" >
                        {{key}}:<span style="color: red">{{value}}</span>
                        <i class="sui-icon icon-tb-close" @click="removeFilterParam(key)"></i>
                    </li>
                    <li class="tag" v-else >
                        品牌:<span style="color: red">{{brandName}}</span>
                        <i class="sui-icon icon-tb-close" @click="removeFilterParam(key)"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div v-for="(value,key,index) in remainFilterConditions" :key="index" v-if="key!='品牌'"
                     v-show="index<6 || showMore" class="type-wrap">
                    <div class="fl key">{{key}}</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="o in value" :key="o.id || o" @click="clickFilterParamHandler(key,o.id || o)">
                                <a>{{o.name || o}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">{{key}}</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="b in value" :key="b.id" v-if="b.image"
                                @click="clickFilterParamHandler('brandId',b.id,b.name)">
                                <img :src="b.image"/>
                            </li>
                            <li style="text-align: center" v-else @click="clickFilterParamHandler('brandId',b.id ,b.name)">
                                <a style="line-height: 30px; font-size: 12px" href="#">{{b.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>
                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat v-show="!showMore" @click="showMore=true">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat v-show="showMore" @click="showMore=false">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <!-- <ul class="sui-nav">
                             <li class="active">
                                 <a href="#">综合</a>
                             </li>
                             <li>
                                 <a href="#">销量</a>
                             </li>
                             <li>
                                 <a href="#">新品</a>
                             </li>
                             <li>
                                 <a href="#">评价</a>
                             </li>
                             <li>
                                 <a href="#">价格</a>
                             </li>
                         </ul>-->

                        <!--排序字段-->
                        <ul class="sui-nav">
                            <li>
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li @click.prevent="searchParams.sortBy='createTime' ,searchParams.descending = !searchParams.descending"
                                :class="{active: searchParams.sortBy==='createTime'}">
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li @click.prevent="searchParams.sortBy='price', searchParams.descending = !searchParams.descending"
                                :class="{active: searchParams.sortBy==='price'}">
                                <a href="#">
                                    价格
                                    <v-icon v-show="searchParams.descending">arrow_drop_down</v-icon>
                                    <v-icon v-show="!searchParams.descending">arrow_drop_up</v-icon>
                                </a>
                            </li>
                        </ul>

                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{totalCount}}+</i> 商品</span>
                            <span><i style="color: red;">{{searchParams.page}}</i>/{{totalPages}}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block"
                               @click.prevent="prePage">&lt;</a>
                            <a class="btn-arrow" href="#" style="display: inline-block"
                               @click.prevent="nextPage">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="item in itemsList" :key="item.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a :href="'/item/'+item.id+'.html'" target="_blank">
                                        <img :src="item.selectedItem.image" height="200"/>
                                    </a>
                                    <ul class="skus">
                                        <li :class="{selected: item.selectedItem.id==sku.id}"
                                            v-for="sku in item.skus" :key="sku.id"
                                            @mouseover="item.selectedItem=sku">
                                            <img :src="sku.image">
                                        </li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ly.formatPrice(item.selectedItem.price)}}</i>
                                    </strong>
                                </div>
                                <div class="attr" style="overflow: hidden">
                                    <em v-html="item.spuName"></em>{{item.selectedItem.title}}
                                </div>
                                <div class="cu" style="overflow: hidden">
                                    <em><span>促</span>{{item.subTitle}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有2000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul>
                            <li class="prev disabled">
                                <a href="#">«上一页</a>
                            </li>
                            <li class="active">
                                <a href="#">1</a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">4</a>
                            </li>
                            <li>
                                <a href="#">5</a>
                            </li>
                            <li class="dotted"><span>...</span></li>
                            <li class="next">
                                <a href="#">下一页»</a>
                            </li>
                        </ul>
                        <div><span>共10页&nbsp;</span><span>
      到第
      <input type="text" class="page-num">
      页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
<!--
第一步：在data中定义变量，分两类：向后台传的，接收服务器返回结果
第二步：在methods中提供请求方法
第三步：钩子函数发起请求
-->
<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            //搜索条件和过滤条件
            searchParams: {
                key: "",
                page: 1,
                filterParams: {},

            },
            brandName:"",
            //过滤条件结果
            filterConditions: {},
            //商品数据列表
            itemsList: [],
            //总记录数
            totalCount: 0,
            //总页数
            totalPages: 0,
            //控制收起和更多的布尔值
            showMore: false,
        },
        //属性计算函数
        computed: {
            remainFilterConditions() {
                //定义一个计算属性返回值对象
                const obj = {}
                //遍历FilterConditions
                for (let key in this.filterConditions) {
                    //判断如果当前map的value的长度是否大于1
                    if (this.filterConditions[key].length > 1) {
                        //将长度大于1的过滤条件赋值给新定义的计算属性
                        obj[key] = this.filterConditions[key]
                    }
                }
                return obj;
            }
        },
        //钩子函数
        created() {
            //先获取搜索条件
            const key = ly.getUrlParam("key")
            //判断条件是否存在
            if (!key) {
                alert("请输入搜索条件!")
                return
            }
            //将地址栏中的字符串查询条件转成json对象
            const searchJson = ly.parse(location.search.substring(1))
            //确保searchJson中的filterParams属性有值
            searchJson.filterParams = searchJson.filterParams || {}

            //确保searchJson中的page属性有值
            searchJson.page = searchJson.page || 1

            /*=============================*/
            //获取请求参数,并转化为对象

            //堆排序进行初始化,默认为"",代表不排序
            searchJson.sortBy = searchJson.sortBy || ""
            //堆排序方式初始化,转为布尔值
            searchJson.descending = searchJson.descending === "true" || false
            //记录在本地search

            /*=============================*/


            //将searchJson赋值给searchParams
            this.searchParams = searchJson
            //调用商品分页查询的请求方法
            this.loadSearchPage()
        },

        //监听函数
        watch: {
            "searchParams.filterParams": {
                handler() {
                    this.loadSearchPage();
                }
            },
            "searchParams.page": {
                handler() {
                    //将searchParams对象转成可以放入地址栏的字符串
                    const searchParamsStr = ly.stringify(this.searchParams)
                    //拼接新的url地址
                    const newUrl = location.origin + location.pathname + "?" + searchParamsStr
                    //用history将查询条件放入地址栏中
                    window.history.replaceState(null, null, newUrl)
                    //切换页码查询
                    this.pageChange()
                }
            },
            /*========================*/
            "searchParams.descending": {
                handler() {
                    this.loadSearchPage();
                }
            },
            /*===================*/
        },
        methods: {
            loadSearchPage() {
                ly.http.post("/search/load/search/page", this.searchParams)
                    .then((resp) => {
                        //过滤条件结果
                        this.filterConditions = resp.data.filterConditions
                        //对商品数据列表中的skus做处理
                        resp.data.itemsList.forEach(item => {
                            //将商品item中的skus字符串转成JSON对象
                            item.skus = JSON.parse(item.skus)
                            //提供一个默认选中的sku对象
                            //item.selectedItem = item.skus[0]
                            let max = 0;
                            let min = 0;
                            //添加默认选中项,如果按价格排序则选出skus中价格最低的或者最高的，否则选skus中的第一个
                            //转换skus,把字符串转换为对象
                            if (this.searchParams.sortBy === "price") {
                                if (this.searchParams.descending === true) {
                                    item.skus.forEach(sku => {
                                        if (sku.price > max) {
                                            max = sku.price
                                        }
                                    })
                                    item.skus.forEach(sku => {
                                        if (sku.price === max) {
                                            item.selectedItem = sku
                                        }
                                    })
                                } else {
                                    //升序,则skus中价格选最低的
                                    min = item.skus[0].price
                                    item.skus.forEach(sku => {
                                        if (sku.price < min) {
                                            min = sku.price
                                        }
                                    })
                                    item.skus.forEach(sku => {
                                        if (sku.price === min) {
                                            item.selectedItem = sku
                                        }
                                    })
                                }
                            } else {
                                item.selectedItem = item.skus[0]
                            }
                        })

                        //商品数据列表
                        this.itemsList = resp.data.itemsList
                        //总记录数
                        this.totalCount = resp.data.totalCount
                        //总页数
                        this.totalPages = resp.data.totalPages
                    })
            },
            //上一页
            prePage() {
                if (this.searchParams.page > 1) {
                    this.searchParams.page--
                }
            },
            //下一页
            nextPage() {
                if (this.searchParams.page < this.totalPages) {
                    this.searchParams.page++
                }
            },


            //请求分页方法
            pageChange() {
                ly.http.post("/search/page/change", this.searchParams)
                    .then((resp) => {
                        //对商品数据列表中的skus做处理
                        resp.data.forEach(item => {
                            //将商品item中的skus字符串转成JSON对象
                            item.skus = JSON.parse(item.skus)
                            //提供一个默认选中的sku对象
                            item.selectedItem = item.skus[0]
                        })
                        //商品数据列表
                        this.itemsList = resp.data
                    })
            },
            removeFilterParam(key){
                const {...newFilterParams}=this.searchParams.filterParams
              delete newFilterParams[key];
                this.searchParams.filterParams=newFilterParams;
                const searchParamsStr = ly.stringify(this.searchParams)
                //拼接新的url地址
                const newUrl = location.origin + location.pathname + "?" + searchParamsStr
                //采用history的方式给地址栏赋值，这种方式不会触发页面刷新
                window.history.replaceState(null, null, newUrl)
            },
            //过滤条件值点击事件
            clickFilterParamHandler(key, value,brandName) {
                if (brandName!=null){
                    this.brandName=brandName;
                }
                //先把filterParams对象赋值给另一个地址的变量
                const {...newFilterParams} = this.searchParams.filterParams
                //把规格参数赋值给新地址的变量
                newFilterParams[key] = value
                //把新地址的变量指向原来的对象
                this.searchParams.filterParams = newFilterParams
                //将searchParams对象转成可以放入地址栏的字符串
                const searchParamsStr = ly.stringify(this.searchParams)
                //拼接新的url地址
                const newUrl = location.origin + location.pathname + "?" + searchParamsStr
                //采用history的方式给地址栏赋值，这种方式不会触发页面刷新
                window.history.replaceState(null, null, newUrl)
            }
        },
        components: {
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>